<template>
  <el-dialog
    :title="title"
    width="650px"
    :visible.sync="openSheet"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <!-- 穿梭框组件：双向绑定已经分配的序列号数组；过滤功能开启；设置过滤输入框的占位文本；设穿梭框左右两侧标题；绑定穿梭框的源数据 -->
    <el-transfer
      v-model="assignedSerialNums"
      filterable
      :filter-placeholder="$t('inputserialNumber')"
      :titles="[sourceTitle, targetTitle]"
      :data="allSerialNums"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入模块
import { departmentAssignSerialNumApi, updatedepartmentAssignSerialNumApi } from '@/views/master/departments/api/departments.api';
export default {
  // 数据定义
  data() {
    return {
      title: this.$t('assignSerialNumber'), // 对话框标题
      sourceTitle: this.$t('serialNumberInquireTitle'), // 穿梭框左侧列表标题
      targetTitle: '', // 穿梭框右侧列表标题
      openSheet: false, // 对话框的显隐
      departentCode: undefined, // 部门代码
      // 请求参数
      params: {
        department: undefined
      },
      allSerialNums: [], // 所有的制番数据
      assignedSerialNums: [], // 所有已经分配后的制番数据
      // 过滤方法，el-transfer 组件开启过滤功能时被调用，判断列表项是否包含有用户输入的关键字。
      // query 是用户输入的关键字，item 是列表中的每一项。
      filterMethod(query, item) {
        // indexOf(query)：这是 JavaScript 字符串对象的一个方法，其作用是在 item.label 字符串中查找 query 字符串首次出现的位置。若找到，就返回其索引；若未找到，则返回 -1
        return item.label.indexOf(query) > -1; // 返回一个布尔值，如果大于-1则表示true
      }
    };
  },
  methods: {
    // 打开对话框
    openSheetDialog(data) {
      this.openSheet = !this.openSheet;
      this.params.department = data.id;
      this.departentCode = data.code
      this.targetTitle = this.$t('departmentCode') + '(' + this.departentCode + ')'
      this.getDepartmentAssignSerials();
    },
    // 关闭对话框
    cancel() {
      this.openSheet = !this.openSheet;
    },
    // 获取已经分配的制番号方法，异步方法，使用async关键字修饰，返回Promise对象
    async getDepartmentAssignSerials() {
      // 使用await关键字等待异步操作完成
      var resp = await departmentAssignSerialNumApi(this.params);
      if (resp.success) {
        const { un_assigned, assigned } = resp.data; // 从后端传来的响应中解构出un_assigned和assigned两个数组
        this.assignedSerialNums = assigned // 将从后端解构出的assigned数组赋值给this.assignedSerialNums
        this.allSerialNums = un_assigned; // 将从后端解构出的un_assigned数组赋值给this.allSerialNums
      } else {
        this.targaMessageBox(this.title, resp.msg);
      }
    },
    async submitForm() {
      // 组装请求数据，部门ID和选中的制番号
      var data = { 'department': this.params.department, 'serialnum': this.assignedSerialNums }
      var resp = await updatedepartmentAssignSerialNumApi(data) // 发送post请求到后端
      if (resp.success) {
        this.targaMessage(
          this.$t('updateSuccess', {
            title: this.$t('role'),
            value: this.departentCode
          })
        );
      } else {
        this.targaMessageBox(this.title, resp.msg);
      }
    }
  }
};
</script>

  <style></style>
